<template>
  <div class="home">
    <Header />

    <!-- 轮播图 -->
    <div data-aos="zoom-in-up" class="home-middle" style="width: 100%;">
    <div class="home-carousel" style="width: 100%;">
      <swiper
      style="width: 100%;"
      :modules="[EffectCreative, Autoplay, Pagination]"
      :grabCursor="true"
      :effect="'creative'"
      :pagination="paginationOption"
      :creativeEffect="{
        prev: {
          shadow: true,
          translate: [0, 0, -400],
        },
        next: {
          translate: ['100%', 0, 0],
        },
      }"
      :loop="true"
      :autoplay="{
        delay: 4500,
        disableOnInteraction: false,
      }"
      >
        <swiper-slide>
          <img height="100%" src="/img/carousel3.png" alt="">
        </swiper-slide>
        <swiper-slide>
          <img height="100%" src="/img/carousel2.png" alt="">
        </swiper-slide>
        <swiper-slide>
          <img height="100%" src="/img/carousel1.png" alt="">
        </swiper-slide>
      </swiper>
    </div>
    </div>

    <!-- 为什么选择我们 -->
    <div class="home-choose-us">
    <div data-aos="fade-right">选择我们</div>
    <div data-aos="fade-right">我们提供精选高品质产品、个性化定制服务和无忧售后保障，
      确保您享受舒适与美观兼具的家居体验。选择我们，
      为您的家增添独特魅力。</div>
    <div>
      <div data-aos="fade-right" class="home-us-img1">
        <img src="/img/1.png" alt="">
      </div>
      <div data-aos="fade-right" class="home-us-img2">
        <img src="/img/2.png" alt="">
        <img src="/img/3.png" alt="">
      </div>
      <div data-aos="fade-left" class="home-us-desc">
        <div class="desc-module" style="top: 0;left: 0;">
          <div class="module-img">
            <img src="/img/delivery.png" alt="">
          </div>
          <div class="module-title">免费送货上门</div>
          <div class="module-description">无论您身处何地，我们都提供免费配送服务，让您的新家具轻松到家，无须担心额外费用。享受无忧购物体验，立即行动！</div>
        </div>
        <div class="desc-module" style="top: 0;right: 0;">
          <div class="module-img">
            <img src="/img/money.png" alt="">
          </div>
          <div class="module-title">资金安全保障</div>
          <div class="module-description">我们提供第三方支付担保服务，确保您的每一笔交易安全可靠。只有在您确认收货满意后，款项才会转给商家，购物更放心！</div>
        </div>
        <div class="desc-module" style="bottom: 0;left: 0;">
          <div class="module-img">
            <img src="/img/support.png" alt="">
          </div>
          <div class="module-title">24/7 客户支持</div>
          <div class="module-description">我们提供全天候专业客服团队，从选购建议到售后关怀，确保您的每一次购物体验都顺畅无忧。随时联系我们，享受贴心服务！</div>
        </div>
        <div class="desc-module" style="bottom: 0;right: 0;">
          <div class="module-img">
            <img src="/img/package.png" alt="">
          </div>
          <div class="module-title">便捷支付</div>
          <div class="module-description">我们支持多种支付方式，包括信用卡、分期付款和电子钱包，满足您的不同需求。轻松选择最适合您的付款方式，享受便捷购物体验！</div>
        </div>
      </div>
    </div>
    </div>

    <!-- 热门产品 -->
    <div class="home-trending-products">
      <div data-aos="zoom-in-up" class="trending-title">热门产品</div>
      <div data-aos="zoom-in-up" class="trending-description">探索最受欢迎的沙发、床具及办公家具，享受限时折扣！精选优质材料与创新设计，打造舒适家居环境，立即抢购热门商品！</div>
      <div data-aos="fade-down" class="trending-card">
        <Card v-for="(item, index) in card" :key="index" :item="item" />
      </div>
    </div>

    <!-- 我们是最大的家具品牌 -->
    <div class="home-biggest-brand">
      <div data-aos="fade-right" class="biggest-left">
        <div class="left-title">
          <span>我们是最大的</span>
          <span>家具品牌</span>
        </div>
        <div class="left-description">
          作为全球领先的家具品牌，我们以卓越品质和创新设计赢得全球信赖。精选优质材料，结合精湛工艺，确保每件家具既耐用又美观。我们的设计团队汇聚顶尖设计师，融合现代便捷与经典美学，提供多样化产品选择。
          我们注重客户体验，提供一站式服务，从选购到售后，确保专业关怀。同时，我们积极履行社会责任，采用环保材料，致力于可持续发展。
          选择我们，就是选择品质、创新和服务，共同打造温馨舒适的家居环境，开启美好生活新篇章。
          通过卓越追求，我们成为全球最大的家具品牌，持续引领行业潮流，满足您对理想家园的期待。
        </div>
        <div class="left-item">
          <div class="item">
            <div>4.5K</div>
            <div>尊享顶级奢华臻品</div>
          </div>
          <div class="item">
            <div>25</div>
            <div>年历史，历久弥新</div>
          </div>
          <div class="item">
            <div>120+</div>
            <div>全球门店，便捷到家</div>
          </div>
        </div>
      </div>
      <div data-aos="fade-left" class="biggest-right">
        <div style="margin-right: 100px;">
          <img width="252px" height="406px" src="/img/home1.png" alt="">
        </div>
        <div>
          <img width="252px" height="503px" src="/img/home2.png" alt="">
        </div>
      </div>
    </div>

    <!-- 客户评价 -->
    <div class="home-eva-us">
      <div class="eva-us-dom">
        <div data-aos="fade-up" class="eva-title">聆听客户心声：真实的使用体验</div>
        <div data-aos="fade-up" class="eva-description">在这里，您可以听到我们用户的真诚反馈。他们分享了使用我们家具后的愉悦体验和对品质、设计及服务的高度认可。每一个故事都是对我们不懈追求卓越的最大肯定。</div>
        <div class="eva-desc-item">
          <div data-aos="fade-right" class="eva-item">
            <div class="item-rate">
              <el-rate :model-value="5" disabled />
            </div>
            <div class="item-content">“从第一次接触这个品牌的家具开始，我就被其卓越的品质和精致的设计所吸引。特别推荐他们的沙发，不仅外观时尚，而且坐感非常舒适。”</div>
            <div class="item-info">
              <div class="info-avatar">
                <img src="/img/avatar1.png" alt="">
              </div>
              <div class="info-in">
                <div>Leslie Alexander</div>
                <div>创始人</div>
              </div>
            </div>
          </div>
          <div data-aos="fade-up" class="eva-item">
            <div class="item-rate">
              <el-rate :model-value="4" disabled />
            </div>
            <div class="item-content">“我们选购的实木餐桌椅使用了无毒害的天然木材，不仅美观耐用，而且对家人健康毫无影响。现在每次用餐都感觉更加安心和舒适。”</div>
            <div class="item-info">
              <div class="info-avatar">
                <img src="/img/avatar2.png" alt="">
              </div>
              <div class="info-in">
                <div>Jacob Jones</div>
                <div>联合创始人</div>
              </div>
            </div>
          </div>
          <div data-aos="fade-left" class="eva-item">
            <div class="item-rate">
              <el-rate :model-value="4" disabled />
            </div>
            <div class="item-content">“客服团队始终耐心解答我的每一个问题，提供了专业的建议。配送速度非常快，安装人员也非常专业。整个过程轻松愉快。”</div>
            <div class="item-info">
              <div class="info-avatar">
                <img src="/img/avatar3.png" alt="">
              </div>
              <div class="info-in">
                <div>Jenny Wilson</div>
                <div>首席营销官</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 历史照片墙 -->
     <div class="home-instagram-story">
      <div data-aos="fade-right" class="instagram-title">家的回忆：珍贵时刻捕捉</div>
      <div class="instagram-img">
        <img data-aos="fade-right" src="/img/bk1.png" alt="">
        <img data-aos="fade-right" src="/img/bk2.png" alt="">
        <img data-aos="fade-left" src="/img/bk3.png" alt="">
        <img data-aos="fade-left" src="/img/bk4.png" alt="">
      </div>
     </div>

    <Footer data-aos="zoom-in-up" />
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { type PaginationOptions } from 'swiper/types'
import { EffectCreative, Autoplay, Pagination } from 'swiper/modules'
import { nextTick, onMounted, ref } from 'vue'
import AOS from 'aos'

const paginationOption = ref<PaginationOptions>({
  clickable: true
})

const card = ref([
  { img: '/img/g1.jpg', brand: 'EleganceWood', name: '米兰时尚椅', price: '￥298.00' },
  { img: '/img/g2.jpg', brand: 'NobleCraft', name: '威尼斯晨光沙发', price: '￥699.00' },
  { img: '/img/g3.jpg', brand: 'PrestigeFurniture', name: '雅致流苏边桌', price: '￥369.00' },
  { img: '/img/g4.jpg', brand: 'regalTimber', name: '极简立方体边桌', price: '￥239.00' },
  { img: '/img/g5.jpg', brand: 'VirtuosoVeneer', name: '塞纳河畔边桌', price: '￥229.00' },
  { img: '/img/g6.jpg', brand: 'EleganceWood', name: '都市绿洲沙发', price: '￥869.00' },
  { img: '/img/g7.jpg', brand: 'NobleCraft', name: '巴洛克华冠', price: '￥599.00' },
  { img: '/img/g8.jpg', brand: 'SovereignSpruce', name: '晨曦曙光椅', price: '￥199.00' }
])

onMounted(() => {
  setTimeout(() => {
    nextTick(() => {
      AOS.init({
        offset: 270,
        duration: 800,
        once: false,
        disable: 'phone',
      })

      AOS.refresh()
    })
  }, 100)
})
</script>

<style lang="less" scoped>
.home-choose-us {
  width: 70%;
  margin: 150px auto 0;

  > div:first-child {
    color: rgb(20, 28, 29);
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    font-family: 'Helvetica';
  }

  > div:nth-child(2) {
    color: rgb(20, 28, 29);
    font-family: 'Helvetica';
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 20px;
  }

  > div:last-child {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;

    .home-us-img1 {
      img {
        width: 252px;
        height: 506px;
      }
    }

    .home-us-img2 {
      display: flex;
      flex-direction: column;
      height: 506px;
      justify-content: space-between;

      img {
        width: 252px;
        height: 238px;
      }
    }

    .home-us-desc {
      width: 555px;
      height: 506px;
      position: relative;

      .desc-module {
        position: absolute;
        width: 262px;
        height: 238px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .module-img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          background: rgba(8, 131, 149, 0.05);
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 36px;
            height: 36px;
          }
        }

        .module-title {
          color: rgb(20, 28, 29);
          font-family: 'Helvetica';
          font-size: 17px;
          font-weight: 700;
          line-height: 22px;
          margin: 20px 0 10px;
        }

        .module-description {
          width: 100%;
          overflow: wrap;

          color: rgb(20, 28, 29);
          font-family: 'Helvetica';
          font-size: 13px;
          font-weight: 400;
          line-height: 22px;
        }
      }
    }
  }
}

.home-trending-products {
  width: 70%;
  margin: 150px auto 0;

  .trending-title {
    color: rgb(20, 28, 29);
    font-family: Epilogue;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
  }

  .trending-description {
    color: rgb(20, 28, 29);
    font-family: Epilogue;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 50px;
  }

  .trending-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    border: 1px solid rgba(20, 28, 29, 0.1);
    border-radius: 10px;
    overflow: hidden;
  }
}

.home-biggest-brand {
  width: 70%;
  height: 506px;
  margin: 150px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .biggest-left {
    width: 555px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .left-title {
      display: flex;
      flex-direction: column;
      color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 40px;
      font-weight: 700;
      line-height: 52px;
    }

    .left-description {
      color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;
      line-height: 30px;
      width: 100%;
      overflow: wrap;
    }

    .left-item {
      width: 100%;
      display: flex;

      .item {
        width: calc(100% / 3);
        box-sizing: border-box;

        > div:first-child {
          color: rgb(20, 28, 29);
          font-family: Epilogue;
          font-size: 30px;
          font-weight: 700;
          line-height: 34px;
        }

        > div:last-child {
          color: rgb(20, 28, 29);
          font-family: Epilogue;
          font-size: 16px;
          font-weight: 400;
          line-height: 30px;
        }
      }
    }
  }

  .biggest-right {
    height: 100%;
    display: flex;
    align-items: center;
  }
}

.home-eva-us {
  width: 100%;
  height: 544px;
  background-color: #088395;
  box-sizing: border-box;
  padding: 100px 0;
  margin: 150px 0 150px;

  .eva-us-dom {
    width: 70%;
    margin: auto;

    .eva-title {
      color: rgb(255, 255, 255);
      font-family: Epilogue;
      font-size: 40px;
      font-weight: 700;
      line-height: 52px;
    }

    .eva-description {
      color: rgb(255, 255, 255);
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0%;
      text-align: left;
      margin-top: 14px;
      margin-bottom: 52px;
    }

    .eva-desc-item {
      width: 100%;
      display: flex;

      .eva-item {
        width: calc(100% / 3);

        .item-rate {
          :deep(.el-rate__icon) {
            font-size: 24px;
            margin-right: 0;
          }
        }

        .item-content {
          width: 360px;
          overflow: wrap;

          color: rgb(255, 255, 255);
          font-family: Epilogue;
          font-size: 16px;
          font-weight: 400;
          line-height: 30px;

          margin: 20px 0 20px;
        }

        .item-info {
          display: flex;
          height: 52px;
          

          .info-avatar {
            margin-right: 10px;
            img {
              width: 52px;
              height: 52px;
              border-radius: 50%;
            }
          }

          .info-in {
            display: flex;
            flex-direction: column;
            justify-content: center;

            > div:first-child {
              color: rgb(255, 255, 255);
              font-family: Epilogue;
              font-size: 16px;
              font-weight: 700;
              margin-bottom: 7px;
            }

            > div:last-child {
              color: rgb(255, 255, 255);
              font-family: Epilogue;
              font-size: 14px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}

.home-instagram-story {
  width: 70%;
  margin: 0 auto 100px;

  .instagram-title {
    color: rgb(20, 28, 29);
    font-family: Epilogue;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
  }

  .instagram-img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 52px;

    img {
      width: 262px;
      height: 262px;
    }
  }
}
</style>